<template>
    <div :class="`tech-after-sale-type ${mode}`">
        <ServerGoodsInfo :info="info" :mode="mode" :styleMode="styleMode" :theme="theme" />
        <ServerTypeItem label="仅退款（无需退货）" @click="oneType" :mode="mode" :styleMode="styleMode" :theme="theme" />
        <ServerTypeItem label="退货退款" @click="twoType" :mode="mode" :styleMode="styleMode" :theme="theme" />
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import ServerGoodsInfo from './aftersale/ServerGoodsInfo';
import ServerTypeItem from './aftersale/ServerTypeItem';
import { setTitle } from '@common/utils';
import { SHOP_ORDER_AFTER_SALE_TYPE } from '@constants/shop';
import { getUiMode, getUiTheme, getUiStyleMode } from '@biztools/info';
import { DEFAULT_MODE, DEFAULT_THEME, DEFAULT_STYLE_MODE } from '@constants/style';
export default {
    name: 'AfterSaleItemType', // 选择退款类型
    components: {
        ServerGoodsInfo,
        ServerTypeItem,
    },
    data() {
        return {
            // 获取设置的配置信息
            mode: getUiMode() || DEFAULT_MODE,
            theme: getUiTheme() || DEFAULT_THEME,
            styleMode: getUiStyleMode() || DEFAULT_STYLE_MODE,
        };
    },
    computed: {
        ...mapState({
            info: state => state.orderDetail.afterSaleGoods,
        }),
    },
    created() {
        setTitle('选择退款类型');
    },
    methods: {
        ...mapActions([
            'setAfterSaleType',
        ]),
        oneType() {
            this.setAfterSaleType(SHOP_ORDER_AFTER_SALE_TYPE.onlyRefund);
            this.gotoAfterSalePage();
        },
        twoType() {
            this.setAfterSaleType(SHOP_ORDER_AFTER_SALE_TYPE.refundAndSale);
            this.gotoAfterSalePage();
        },
        gotoAfterSalePage() {
            this.$router.push('/shop-order/after-sale/apply-item');
        },
    },
};
</script>

<style lang="less" scoped>
.tech-after-sale-type {
    .p-v(@shop-bag-gap);
    min-height: calc(100vh - @shop-bag-gap * 2);
    .mode-white();
    &.white {
        background-color: @shop-bg-color;
    }
    &.black {
        background-color: @black;
    }
}
</style>
